import * as React from "react";
import { Row, Col, Modal, Spin } from "antd";
import SearchBar from "./compontents/SearchBar";
import LineChartToDate from "./compontents/LineChartToDate";
import BieChartTo31 from "./compontents/BieChartTo31";
import OneDepartmentCompare from "./compontents/OneDepartmentCompare";
import EnergyTrendTo31 from "./compontents/EnergyTrendTo31";
import { getBaseDeviceType, situation } from "../ServeApi";
import { AjaxData } from "../../../../data/interface/publicInterface";
export interface SubItemEnergyOverviewProps {}

export interface SubItemEnergyOverviewState {
  loading: boolean;
}

class SubItemEnergyOverview extends React.Component<
  SubItemEnergyOverviewProps,
  SubItemEnergyOverviewState
> {
  state = { loading: false };
  private treeSelectData: any[] = []; //转换而来的选择树数据
  private defaultTreeSelectValue: string = ""; //默认选择
  private dataSouce: any = null;
  private Type: number = 1;
  render() {
    return (
      <div className="SubItemEnergyOverview">
        <SearchBar
          defaultValue={this.Type}
          onChange={(type: number) => {
            this.getSeachPream(type);
          }}
        />
        <Row style={{ marginTop: 12 }}>
          <Col span="8">
            {/*日部门用能占比统计排名横向柱状图 */}
            {this.dataSouce ? (
              <Spin spinning={this.state.loading}>
                <LineChartToDate
                  dataSouce={this.dataSouce}
                  energyType={this.Type}
                />
              </Spin>
            ) : null}

            {/*过去31天部门用能饼图 */}
            {this.dataSouce ? (
              <Spin spinning={this.state.loading}>
                <BieChartTo31 dataSouce={this.dataSouce} />
              </Spin>
            ) : null}
          </Col>
          <Col span="16" style={{ paddingLeft: 12 }}>
            {/*单部门用能同比分析 */}
            <OneDepartmentCompare
              treeData={this.treeSelectData}
              defaultValue={this.defaultTreeSelectValue}
              energyType={this.Type}
            />
            {/*过去31天用能趋势*/}
            <EnergyTrendTo31
              treeData={this.treeSelectData}
              defaultValue={this.defaultTreeSelectValue}
              energyType={this.Type}
            />
          </Col>
        </Row>
      </div>
    );
  }
  componentWillMount() {
    this.getList();
    this.getsituation();
  }
  /**回调函数 */
  //搜索的条件变更的回调函数
  getSeachPream(type: number) {
    this.Type = type;
    this.getsituation();
    this.forceUpdate();
  }
  //格式化树状选择数据
  getTreeData(arr: any[]) {
    let array = arr.map((item) => {
      return {
        key: item.id,
        id: item.id,
        pId: null,
        value: "" + item.id,
        title: item.name,
      };
    });
    this.treeSelectData = array;
    if (array.length > 0) {
      this.defaultTreeSelectValue = array[0].value;
      this.forceUpdate();
    }
    this.forceUpdate();
  }
  /**请求数据 */
  //获取分项列表
  async getList() {
    let _this = this;
    this.setState({ loading: true });
    try {
      let res: any = await getBaseDeviceType().catch((err) => {
        console.log(err);
        _this.setState({ loading: false });
      });
      let json: AjaxData = res;
      if (json.success) {
        this.getTreeData(json.data);
        this.setState({ loading: false });
        this.forceUpdate();
      } else {
        Modal.error({
          title: json.message,
          onOk: () => {
            _this.setState({ loading: false });
          },
        });
      }
    } catch (error) {
      Modal.error({
        title: "初始化程序失败，无法读取数据，请刷新页面。",
        onOk: () => {
          _this.setState({ loading: false });
        },
      });
      console.error(error);
    }
  }
  //用能概况
  async getsituation() {
    let _this = this;
    let pream = { energyType: this.Type };
    try {
      this.setState({ loading: true });
      let res: any = await situation(JSON.stringify(pream)).catch((err) => {
        console.log(err);
        _this.setState({ loading: false });
      });
      let json: AjaxData = res;
      if (json.success) {
        _this.dataSouce = json.data;
        _this.setState({ loading: false });
        _this.forceUpdate();
      } else {
        Modal.error({
          title: json.message,
          onOk: () => {
            _this.setState({ loading: false });
          },
        });
      }
    } catch (error) {
      Modal.error({
        title: "初始化程序失败，无法读取数据，请刷新页面。",
        onOk: () => {
          _this.setState({ loading: false });
        },
      });
      console.error(error);
    }
  }
}

export default SubItemEnergyOverview;
